import React from 'react'
import Head from 'next/head';
import Link from 'next/link';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';

import '../../../styles.styl';

import { fetchTvs } from '../../actions';
import reducer from '../../reducers';

import CustomHeader from '../../components/CustomHeader';
import Tmenus from '../../containers/Tmenus';

const store = createStore(
	reducer, 
	applyMiddleware(
		thunkMiddleware,
	)
);

class Home extends React.Component {

	static async getInitialProps() {
		// 默认获取marvel类的数据
		const res = await fetch(`https://api.tvmaze.com/search/shows?q=Marvel`)
		const data = await res.json();
		return {
			lists: data
		}
	}
	render() {
		return (
			<Provider store={store}>
				<div className="font1 color1 layouts">
					<Head>
						<meta name="viewport" content="initial-scale=1.0, width=device-width" key="viewport" />
						<title> Next.js Study </title>
					</Head>
					<div>
						<header className="mar-top__global">
							<CustomHeader></CustomHeader>
						</header>
            { this.props.children }
					</div>
				</div>
			</Provider>
		)
	}
}

export default Home